import React, { Component } from "react";

// import {Route} from 'react-router-dom'
// 导入models
import models from "@/models/Goods";
// 导入修改组件
import GoodsUpdate from "./GoodsUpdate";
// 导入添加组件
import GoodsAdd from "./GoodsInc";
// 导入loading
import Loading from "@/components/Loading";
// 导入css
import "@/assets/css/Goods.css";
// 导入styled
import styled from "styled-components";
// 导入antd
import { Breadcrumb, Table, Button, Space, Pagination } from "antd";

class Goods extends Component {
  state = {
    data: [],
    showDate: [],
    page: 1,
    // 显示页头
    HeaderShow: false,
    // 显示加载动画
    loadShow: false,
    //   路劲名
    name: "",
  };

  columns = [
    {
      title: "类别",
      dataIndex: "name",
      key: "name",
      width: "1000px",
      render: (text) => <span>{text}</span>,
    },
    {
      title: "操作",
      key: "action",
      render: (text, record) => (
        <Space size="middle">
          <span>
            <GoodsUpdate
              data={record}
              show={this.show}
              page={this.state.page}
            />
          </span>
          <Button
            type="primary"
            size="small"
            onClick={() => {
              this.sonList(record);
            }}
          >
            查看子分类
          </Button>
        </Space>
      ),
    },
  ];

  render() {
    return (
      <div>
        <div className="pageHand">
          <div className="pageHand">
            <Button onClick={this.goBack} style={{ marginRight: "20px" }}>
              回到主分类
            </Button>
            <Breadcrumb>
              <Breadcrumb.Item>
                <span>商品列表</span>
              </Breadcrumb.Item>
              {this.state.HeaderShow ? (
                <Breadcrumb.Item>
                  <span>{this.state.name}</span>
                </Breadcrumb.Item>
              ) : (
                <></>
              )}
            </Breadcrumb>
          </div>

          <GoodsAdd
            data={this.state.data}
            show={this.show}
            page={this.state.page}
          />
        </div>
        <div style={{ position: "relative" }}>
          <Table
            columns={this.columns}
            dataSource={this.state.showDate}
            pagination={false}
            rowKey={(record) => record._id}
            size="small"
          />
          {this.state.loadShow ? (
            <Load>
              <Loading />
            </Load>
          ) : (
            <></>
          )}
        </div>
        <Page>
          <Pagination
            showQuickJumper
            current={this.state.page}
            total={this.state.data.length}
            onChange={this.onChange}
            pageSizeOptions={[10]}
          />
        </Page>
      </div>
    );
  }

  componentDidMount() {
    this.show(this.state.page);
  }

  onChange = (pageNumber) => {
    // 每次点击更改showDate中的数据
    this.showList(pageNumber);
    // 修改page
    this.setState({ page: pageNumber });
  };

  // 初始化显示
  show = (pageNumber) => {
    this.setState({ loadShow: true });
    // 初始化页码
    pageNumber = pageNumber === 1 ? 1 : pageNumber;
    // id
    const parentId = 0;
    // 发起请求，拿到数据
    models.goodList(parentId).then((ret) => {
    //   console.log(ret);
      this.setState(
        () => {
          return { data: ret.data };
        },
        () => {
          this.showList(pageNumber);
          setTimeout(() => {
            this.setState({ loadShow: false });
          }, 1000);
        }
      );
    });
  };
  goBack = () => {
    this.show(1);
  };

  // 列表显示
  showList = (pageNumber) => {
    // 清空数组
    const showDate = [];
    // 将要显示的数据存放到showDate中
    this.state.data.forEach((item, index) => {
      if (index < pageNumber * 9 && index >= (pageNumber - 1) * 9) {
        showDate.push(item);
      }
    });
    // 更新state中的showData
    this.setState(() => {
      return { showDate };
    });
  };

  // 查看子分类
  sonList = (record) => {
    this.setState({ HeaderShow: true, loadShow: true, name: record.name });
    // this.show()
    // console.log(record);
    models.goodList(record._id).then((ret) => {
    //   console.log(ret);
      this.setState(
        () => {
          return {
            data: ret.data,
          };
        },
        () => {
          this.setState({ loadShow: false });
          this.showList(1);
        }
      );
    });
  };
}

const Page = styled.div`
  margin: 10px 0 0 300px;
`;

const Load = styled.div`
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #eee;
  opacity: 0.5;
  box-sizing: border-box;
  padding-bottom: 100px;
`;

export default Goods;
